<template>
  <el-container>
    <el-main>
      <h1>文章管理</h1>
      <!--搜索功能  该功能暂时没有实现-->
      <el-row>
        <el-col :span="4" :xs="8">
          <el-input
            placeholder="根据文章标题或分类搜索"
            v-model="search"
            clearable
          ></el-input>
        </el-col>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="SearchArtcle(search)"
        ></el-button>
        <el-button
          type="danger"
          icon="el-icon-delete"
          @click="DeleteArtcle"
        ></el-button>
      </el-row>
      <!--文章展示-->
      <el-row>
        <el-col>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            highlight-current-row
          >
            <!-- 序号 -->
            <el-table-column
              fixed
              label="序号"
              type="index"
              width="80"
            ></el-table-column>
            <!--文章标题-->
            <el-table-column
              prop="title"
              label="标题"
              width="170"
              show-overflow-tooltip
            ></el-table-column>
            <!--文章所属分类-->
            <el-table-column
              prop="cate[0].categoryName"
              label="分类"
              width="100"
              show-overflow-tooltip
            ></el-table-column>
            <!--文章标签-->
            <el-table-column label="标签" width="200" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-tag
                  v-for="(item, index) in scope.row.tags"
                  :key="index"
                  :type="types[index]"
                  effect="dark"
                  size="mini"
                  style="margin-left: 10px"
                >
                  {{ item }}
                </el-tag>
              </template>
            </el-table-column>
            <!--文章封面-- 此功能暂时关闭>
            <!-- <el-table-column label="文章封面" show-overflow-tooltip width="130">
              <template slot-scope="scope">
                <div class="demo-image__preview">
                  <el-image :src="scope.row.cover_address" style="width: 100px; height: 40px"></el-image>
                </div>
              </template>
            </el-table-column> -->
            <!--文章添加时间-->
            <el-table-column prop="create_time" label="发布时间" width="200">
              <template slot-scope="scope">
                <span>{{ scope.row.create_time | formatDate }}</span>
              </template>
            </el-table-column>
            <!--文章更新时间 -->
            <el-table-column
              :prop="update_time ? update_time : create_time"
              label="更新时间"
              width="200"
            >
              <template slot-scope="scope">
                <span>{{
                  (scope.row.update_time
                    ? scope.row.update_time
                    : scope.row.create_time) | formatDate
                }}</span>
              </template>
            </el-table-column>
            <!--文章浏览量-->
            <el-table-column
              prop="visited"
              label="浏览量"
              width="100"
            ></el-table-column>
            <!--文章收藏数-->
            <el-table-column
              prop="stars"
              label="收藏数"
              width="100"
            ></el-table-column>
            <!--文章评论数-->
            <!-- <el-table-column prop="comments_number" label="评论数" width="80"></el-table-column> -->
            <!--操作-->
            <el-table-column label="操作" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-button
                  @click="handleDelete(scope.row._id)"
                  type="text"
                  size="small"
                  >删除</el-button
                >
                <el-button
                  @click="handleEdit(scope.row._id)"
                  type="text"
                  size="small"
                  >编辑</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <!--分页-->
      <el-row>
        <el-col>
          <div class="block">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[3, 5, 8]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
// 导入时间戳转换日期时间的js
import formatDate from "../../assets/static/js/time.js";
import { ReqPassageDetail, ReqDeletePassage } from "../../api/index";
export default {
  name: "articleNav",
  data() {
    return {
      types: ["", "success", "danger"], // 文章标签的类型
      tableData: [], //列表数据
      pageNum: 1, //当前页码
      pageSize: 3, //当前页大小
      pages: 0, //总页数
      total: 0, //数据条数
      search: "",
    };
  },
  methods: {
    // 请求分页数据
    GetDate(pageNum, PageSize,temp) {
      ReqPassageDetail(pageNum, PageSize).then((res) => {
        if (res.code === 0) {
          //更新数据
          this.tableData = res.data.list;
          this.pageNum = res.data.pageNum;
          this.pageSize = res.data.pageSize;
          this.pages = res.data.pages;
          this.total = res.data.total;
          if(temp){
            ReqPassageDetail(res.data.pages, PageSize).then((res)=>{
              //更新数据
          this.tableData = res.data.list;
          this.pageNum = res.data.pageNum;
          this.pageSize = res.data.pageSize;
          this.pages = res.data.pages;
          this.total = res.data.total;
            })
          }
        }
      });
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.GetDate(this.pageNum, this.pageSize);
      console.log(`每页 ${this.pageSize} 条`);
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.GetDate(this.pageNum, this.pageSize);
      console.log(`当前页: ${val}`);
    },

    // 删除文章按钮
    handleDelete(articleId) {
      //console.log(articleId)
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 点击确认删除后向后端发起请求删除该数据
          ReqDeletePassage(articleId).then((res) => {
            if (res.code === 0) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              // 重新请求数据 请求数据是当前页面的数据，注意这里不要刷新页面，会带来不好的用户体验
              this.GetDate(this.pageNum, this.pageSize);
            } else {
              this.$message({
                type: "danger",
                message: "删除失败!",
              });
            }
          });
        })
        // 点击取消退出
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 编辑文章按钮 该功能已经实现
    handleEdit(articleId) {
      this.$router.replace({
        path: "/admin/publish",
        query: {
          articleId,
        },
      });
      console.log(articleId);
    },

    // 模糊搜索文章 此功能没有实现
    SearchArtcle(value) {
      console.log(value);
    },
  },
  // 日期过滤器 时间戳转换成日期时间
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, "YMDHMS");
    },
  },
  // 钩子 组件加载后运行 查询所有分类
  created: function () {
    //初始化默认请求数据
    let temp = 0
     if (this.$route.query.pageindex) {
        console.log('这是数据----',this.$route.query.pageindex)
        temp = 1
      }
    this.GetDate(this.pageNum, this.pageSize,temp);
    /* this.$nextTick(()=>{
      console.log('dwdadadad')
       if (this.$route.query.pageindex) {
        console.log('这是数据----',this.pages)
        this.GetDate(this.pages, this.pageSize);
      }
    }) */
  },
};
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
</style>
